<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>数字化转型创意大赛决赛</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">

    <!-- Custom styles for this template -->
    <style>
        /*
 * Globals
 */

        /* Links */

        a,
        a:focus,
        a:hover {
            color: #fff;
        }

        /* Custom default button */

        .btn-secondary,
        .btn-secondary:hover,
        .btn-secondary:focus {
            color: #333;
            text-shadow: none;
            /* Prevent inheritance from `body` */
            background-color: #fff;
            border: .05rem solid #fff;
        }


        /*
 * Base structure
 */

        html,
        body {
            height: 100%;
            background-color: #319C8B;
        }

        body {
            display: -ms-flexbox;
            display: -webkit-box;
            display: flex;
            -ms-flex-pack: center;
            -webkit-box-pack: center;
            justify-content: center;
            text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
            box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
        }


        .cover-container {
            min-width: 96%;
        }

        /*
 * Header
 */

        .masthead {
            margin-bottom: 2rem;
        }

        .masthead-brand {
            margin-bottom: 0;
            color: white;
            font-size: 40px;
        }

        .nav-masthead .nav-link {
            padding: .25rem 0;
            font-weight: 700;
            color: rgba(255, 255, 255, .5);
            background-color: transparent;
            border-bottom: .25rem solid transparent;
        }

        .nav-masthead .nav-link:hover,
        .nav-masthead .nav-link:focus {
            border-bottom-color: rgba(255, 255, 255, .25);
        }

        .nav-masthead .nav-link+.nav-link {
            margin-left: 1rem;
        }

        .nav-masthead .active {
            color: #fff;
            border-bottom-color: #fff;
        }

        @media (min-width: 48em) {
            .masthead-brand {
                float: left;
            }
            .nav-masthead {
                float: right;
            }
        }


        /*
 * Cover
 */

        .cover {
            padding: 0 1.5rem;
        }

        .cover .btn-lg {
            padding: .75rem 1.25rem;
            font-weight: 700;
        }


        /*
 * Footer
 */

        .mastfoot {
            color: rgba(255, 255, 255, .5);
        }

        .card-title {
            font-size: 14px;
            text-align: left;
        }

        .card-text,
        .card-text .badge {
            font-size: 20px;
        }
        .card-body{
        		padding:0.6rem;
        }
    </style>
</head>

<body class="text-center">

    <div class="cover-container d-flex h-100 p-3 mx-auto flex-column" id="app">
        <header class="masthead mb-auto">
            <div class="inner">
                <h3 class="masthead-brand">
                    <img src="/static/logo.png" height="100" /> 数字化转型创意大赛决赛
                </h3>
            </div>
        </header>

        <div class="row">
            <table class="table" style="background-color:white;">
			  <thead>
			    <tr>
			      <th scope="col">id</th>
			      <th scope="col">标题</th>
			      <th scope="col">状态</th>
			      <th scope="col">分数</th>
			      <th scope="col">操作</th>
			    </tr>
			  </thead>
			  <tbody>
			    <tr v-for="item in list">
			      <td>{{item.id}}</td>
			      <td>{{item.title}}</td>
			      <td>
			      	<h3><span class="badge badge-dark" v-if="item.statu == 0">不可评分</span></h3>
			      	<h3><span class="badge badge-warning" v-if="item.statu == 1">评分中</span></h3>
			      	<h3><span class="badge badge-success" v-if="item.statu == 2">评分完毕</span></h3>
			      </td>
			      <td>{{item.score == null ? '':item.score.toFixed(4)}}</td>
			      <td>
			      	<button type="button" class="btn btn-primary" v-if="item.statu == 0" @click="enableGrade(item)">开启评分</button>
			      	<button type="button" class="btn btn-light" @click="openInnovate(item)">查看</button>
					</td>
			    </tr>
			    
			  </tbody>
			</table>
        </div>

        <footer class="mastfoot mt-auto">
            <div class="inner" style="font-size: 20px;">
                <p>科技与产品管理部 软件开发一部</p>
            </div>
        </footer>

       
    </div>




    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.0"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                list: []
            },
            methods: {
            		enableGrade:function(item){
            			var vm = this;
            			var r=confirm("是否确认启动该创意评分？");
				  	if (r==true)
					    {
					    		this.$http.post('/enableGrade?id='+item.id).then(response => {
								if (response.body.success) {
									alert('开启评分成功');
									vm.loadList();
								}
								else{
									alert('开启失败');
								}
							}, response => {
								alert('网络错误');
							});
					    }
            		},
            		openInnovate: function(item){
            			location.href = '/innovate?id=' + item.id;
            		},
                loadList: function () {
                    var vm = this;
                    this.$http.get('/list').then(response => {
                        if (response.body.success) {
                            vm.list = response.body.data;
                        }
                        else {
                            this.$toast(response.body.msg);
                        }
                    }, response => {
                        this.$toast('数据加载失败');
                    });
                }
            },
            mounted: function () {
                var vm = this;
                this.$nextTick(function () {
                    vm.loadList();
                })
            }
        });
    </script>
</body>

</html>